<!DOCTYPE html>
<html>
<head>
    <title>权限列表</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/layui/css/layui.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/dtree/dtree.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/dtree/font/dtreefont.css">
</head>
<body>
<div style="height: 800px;width: 25.6%;float: left;border: #9F9F9F solid 1px">
    <ul id="leftMenu" class="dtree" data-id="0"></ul>
</div>
<div style="height: 100%;width: 74%;float: right;border: #9F9F9F solid 1px">
    <div style="margin-left: 10px;margin-top: 10px">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">权限名</label>
                    <div class="layui-input-inline" style="width: 150px">
                        <input type="text" class="layui-input" id="title" placeholder="权限" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="searchBtn">查询</button>
                </div>
            </div>
        </form>
        <hr>
        <table id="dataTable" lay-filter="dataTableFilter"></table>
    </div>
</div>
<script type="text/html" id="editTpl">
    <form class="layui-form layui-form-pane" lay-filter="editFormFilter" style="margin-top: 15px;margin-left: 15px">
        <div class="layui-form-item">
            <label class="layui-form-label">
                父权限
            </label>
            <div class="layui-input-inline" style="width: 350px">
                <ul id="selectTree" class="dtree" data-id="0" ></ul>
                <input type="hidden" class="layui-input" id="parentId" name="parentId" placeholder="父权限" value="0" lay-verify="required" lay-reqText="父权限不能为空" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                权限名
            </label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="title" placeholder="权限" lay-verify="required" lay-reqText="权限名不能为空" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="icon" placeholder="图标"  />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="href" placeholder="链接" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否展开</label>
            <div class="layui-input-inline">
                <input type="radio" name="spread" value="1" title="是" checked>
                <input type="radio" name="spread" value="0" title="否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <input type="radio" name="type" value="1" title="菜单" checked>
                <input type="radio"  name="type" value="2" title="按钮">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标识</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="tag" placeholder="标识表达式" lay-verify="required" lay-reqText="标识表达式不能为空" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="sort" placeholder="排序" />
            </div>
        </div>
        <button id="subBtn" type="button" lay-filter="subBtnFilter" lay-submit style="display: none"></button>
    </form>
</script>

<script type="text/html" id="headerBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" type="button" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>添加
        </button>
    </div>
</script>
<script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-warm" type="button" lay-event="edit">
            <i class="layui-icon layui-icon-edit "></i>修改
        </button>
        <button class="layui-btn layui-btn-sm  layui-btn-danger" type="button" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
</script>
<script src="${request.contextPath}/resources/layui/layui.js"></script>
<script>
    var cxt = "${request.contextPath}";
    layui.extend({
        dtree: cxt+'/resources/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['dtree','jquery','layer','table','form'],function (){
        let dtree = layui.dtree;
        let $ = layui.jquery;
        let layer = layui.layer;
        let table = layui.table;
        let form = layui.form;
        //渲染当前页面左侧的菜单
        let treeOpt = {
            elem:"#leftMenu",//树容器dom
            url:cxt+'/sysper/list.do',//需要渲染成树的数据接口
            dataStyle: "layuiStyle",//数据风格使用layui风格
            response:{message:"msg",statusCode:200},
            dataFormat: "list",
            ficon:["2","5"],//第一个图标  有子节点和没有子节点
            icon:["2","-1"],//第二个图标
        };
        let leftMenuTree = dtree.render(treeOpt);
        //渲染数据表格
        let tabOpt = {
            elem: "#dataTable",
            id: "dataTableId",
            url: cxt + "/sysper/page.do",
            toolbar:"#headerBtns",
            cols: [[
                {field: "title", title: "权限名"},
                {field: "icon", title: "图标 ", templet: function (d) {
                        let icon = d.icon;
                        if(icon){
                            return "<i class='layui-icon '>"+icon+"</i>";
                        }else {
                            return  "";
                        }

                    }
                },
                {field: "href", title: "链接"},
                {field: "spread", title: "展开", templet: function (d) {
                        let spread = d.spread;
                        if (spread == 1) {
                            return "展开";
                        } else if (spread == 0) {
                            return "不展开";
                        }
                    }
                },
                {
                    field: "type", title: "类型", templet: function (d) {
                        let type = d.type;
                        if (type == 1) {
                            return "菜单";
                        } else if (type == 2) {
                            return "按钮";
                        }
                    }
                },
                {field: "tag", title: "标识"},
                {field: "sort", title: "排序"},
                {title: "操作",toolbar:"#rowBtns",minWidth:180,fixed:"right"}
            ]],
            page: true,
            parseData: function (rs) {
                if (rs.code == 200) {
                    return {
                        code: rs.code,
                        msg: rs.msg,
                        count: rs.data.total,
                        data: rs.data.records
                    }
                }
            },
            response: {
                statusCode: 200
            }
        };
        //渲染数据表格
        let tabIns = table.render(tabOpt);
        //搜索
        $("#searchBtn").click(function (){
            let title = $("#title").val();
            tabIns.reload({
                where:{
                    title:title,
                }
            })
        });
        //头工具栏事件
        table.on("toolbar(dataTableFilter)",function (d){
            let event = d.event;
            if(event == "add"){
                //调用具体的add
                add();
            }
        })
        /**
         * 调用具体的add
         */
        function add(){
            let layerOpt = {
                title:"编辑",
                type:1,
                content:$("#editTpl").html(),
                area:['500px','560px'],
                btn:['确认','取消'],
                btnAlign:'c',
                anim:4,
                success:function (layero,index){
                    //渲染下拉树
                    let selectTreeOpt = {};
                    Object.assign(selectTreeOpt,treeOpt);
                    selectTreeOpt.elem = "#selectTree";
                    selectTreeOpt.select = true;
                    dtree.render(selectTreeOpt);
                    dtree.on("node('selectTree')" ,function(obj){
                        let permissionId = obj.param.nodeId;
                        $("#parentId").val(permissionId);//为隐藏的input赋值
                    });
                    //渲染表单
                    form.render();
                    //设置表单提交监听事件
                    form.on("submit(subBtnFilter)",function (d){
                        let formData = d.field;
                        //进行ajax提交
                        $.post(cxt+"/sysper/add.do",formData,function (rs){
                            layer.msg(rs.msg);
                            if(rs.code != 200){
                                return false;
                            }
                            //刷新表格
                            $("#searchBtn").click();
                            //刷新左侧树
                            dtree.reload(leftMenuTree);
                            //关闭弹层
                            layer.close(index);
                        });
                        return false;//阻止默认提交行为
                    });
                },
                yes:function (index,layero){
                    $("#subBtn").click();
                }
            };
            layer.open(layerOpt);
        }

        //行工具栏事件
        table.on("tool(dataTableFilter)",function (d){
            let event = d.event;
            let rowData = d.data;
            if(event == "edit"){
                //调用具体的修改方法
                edit(rowData);
            }else if(event == "delete"){
                del(rowData);
            }
        })


        /**
         * 调用具体的add
         */
        function edit(rowData){
            let layerOpt = {
                title:"编辑",
                type:1,
                content:$("#editTpl").html(),
                area:['500px','560px'],
                btn:['确认','取消'],
                btnAlign:'c',
                anim:4,
                success:function (layero,index){
                    //表单赋值
                    form.val("editFormFilter",rowData);

                    //渲染下拉树
                    let selectTreeOpt = {};
                    Object.assign(selectTreeOpt,treeOpt);
                    selectTreeOpt.elem = "#selectTree";
                    selectTreeOpt.select = true;
                    selectTreeOpt.done = function(res, $ul, first){
                        if(first) {
                            //初始化下拉树显示的节点
                            dtree.selectVal("selectTree", rowData.parentId+"");
                        }
                    }
                    dtree.render(selectTreeOpt);
                    dtree.on("node('selectTree')" ,function(obj){
                        let permissionId = obj.param.nodeId;
                        $("#parentId").val(permissionId);//为隐藏的input赋值
                    });
                    //渲染表单
                    form.render();
                    //设置表单提交监听事件
                    form.on("submit(subBtnFilter)",function (d){
                        let formData = d.field;
                        formData.id = rowData.id;
                        //进行ajax提交
                        $.post(cxt+"/sysper/update.do",formData,function (rs){
                            layer.msg(rs.msg);
                            if(rs.code != 200){
                                return false;
                            }
                            //刷新表格
                            $("#searchBtn").click();
                            //刷新左侧树
                            dtree.reload(leftMenuTree);
                            //关闭弹层
                            layer.close(index);
                        });
                        return false;//阻止默认提交行为
                    });
                },
                yes:function (index,layero){
                    $("#subBtn").click();
                }
            };
            layer.open(layerOpt);
        }

        /**
         * 删除权限
         * @param rowData
         */
        function   del(rowData){

            layer.confirm("确定要删除该权限吗?",function (index){
                $.get(cxt+"/sysper/delete.do?id="+rowData.id,function (rs){
                    layer.msg(rs.msg);
                    layer.close(index);
                    //刷新表格
                    $("#searchBtn").click();
                    //刷新左侧树
                    dtree.reload(leftMenuTree);
                })
            });
        }


    });
</script>
</body>
</html>
